<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>virtualNode</title>
    <style>
        .box{
            width:200px;
            height: 200px;
            padding: 20px;
            margin: 20px;
            border: 20px solid black;
            background: red;
        }
        .box1{
            /*box-sizing: content-box;*/
        }
        .box2{
            box-sizing:padding-box;
        }
        .box3{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
       <div id='box1' class="box box1">content-box</div>
       <div id='box2' class="box box2">padding-box</div>
       <div id='box3' class="box box3">border-box</div>
       <script type="text/javascript">
           console.log(document.getElementById('box1').offsetWidth);
           console.log(document.getElementById('box2').offsetWidth);
           console.log(document.getElementById('box3').offsetWidth);
       </script>
</body>
</html>